<template>
	<div class="uploadCommon">
		<a-select style="width: 100%" v-model:value="params.background" @change="handleChange" :getPopupContainer="p=>p.parentNode">
			<a-select-option value="system">{{i18n('componentStyle.systemBackground','系统背景图')}}</a-select-option>
			<a-select-option value="custom">{{i18n('componentStyle.customizeBackground','自定义背景图')}}</a-select-option>
			<a-select-option v-if="params.mode!='material'" value="color">{{i18n('componentStyle.customColor','自定义颜色')}}</a-select-option>
			<a-select-option v-if="params.mode!='material'" value="none">{{i18n('componentStyle.none','无')}}</a-select-option>
		</a-select>
		<div class="pageStyle-img-system" v-if="params.background!='color'">
			<div style="box-sizing: border-box" v-if="params.background=='system'"
				 @click="systemImg(params.bgImage)">
                <img v-if="params.bgImage && params.mode=='dark'" class="pageStyle-img-system-empty-bgImage"
                     :src="getImage('/image/background/dark'+params.bgImage+'.png')"/>
                <img v-else-if="params.bgImage && params.mode=='bright'" class="pageStyle-img-system-empty-bgImage"
                     :src="getImage('/image/background/light'+params.bgImage+'.png')"/>
                <img v-else-if="params.bgImage && params.mode=='border'" class="pageStyle-img-system-empty-bgImage"
                     :src="getImage('/image/background/border'+params.bgImage+'.png')"/>
                <img v-else-if="params.bgImage && params.mode=='title'" class="pageStyle-img-system-empty-bgImage" style="height: 35px"
                     :src="getImage('/image/background/title'+params.bgImage+'.png')"/>
				<div style="display: flex;align-items: center;box-sizing: border-box" v-else-if="params.bgImage && params.mode=='material'">
					<img v-if="params.imgName=='gif'" class="pageStyle-img-system-empty-bgImage" style="height: 150px;width: 150px;margin: auto"
						 :src="getImage('/image/background/dynamic'+params.bgImage+'.gif')"/>
					<img v-else-if="params.imgName=='png'" class="pageStyle-img-system-empty-bgImage" style="height: 40px"
						 :src="getImage('/image/background/dynamicPng'+params.bgImage+'.png')"/>
					<img v-else class="pageStyle-img-system-empty-bgImage" style="height: 40px"
						 :src="getImage('/image/background/'+params.imgName+params.bgImage+'.png')"/>
				</div>
				<div v-else class="pageStyle-img-system-empty">
					<img class="pageStyle-img-system-empty-img" src="/image/system-img.png"/>
					<span>{{i18n('componentStyle.selectPicture','选择系统图片')}}</span>
				</div>
				<!--选择边框里面得背景颜色-->
				<div @click.stop="" style="width: 90%;margin:10px auto" v-if="params.bgImage && params.mode=='border'">
                    <rx-color-picker v-model:value="backgroundColor"></rx-color-picker>
				</div>
			</div>
			<div v-else-if="params.background=='custom'">
				<a-upload-dragger
					class="self-dragger"
					:file-list="fileList"
					:directory="false"
					:showUploadList="false"
					:before-upload="beforeUpload"
          :customRequest="()=>{}"
				>
					<div v-if="!params.customImage" class="pageStyle-img-system-empty">
						<img class="pageStyle-img-system-empty-img" :src="getImage('/image/system-img.png')"/>
						<span>{{i18n('componentStyle.uploadPictures','上传图片')}}</span>
					</div>
					<p v-else>
						<img class="uploadCommon-img" :src="getFilePath(params.customImage)" alt="photo"/>
					</p>
				</a-upload-dragger>
			</div>
		</div>
		<div v-else-if="params.customColor" >
			<div class="uploadCommon-color">
				<div class="uploadCommon-color-common">
					<div>{{i18n('componentStyle.backgroundColor','背景颜色')}}</div>
                    <rx-color-picker v-model:value="params.customColor" :placeholder="'背景颜色'" @change="colorChange"></rx-color-picker>
				</div>
                <div class="uploadCommon-color-common">
                    <div>{{i18n('componentStyle.borderColor','边框颜色')}}</div>
                    <rx-color-picker v-model:value="params.borderColor" :placeholder="'边框颜色'" @change="colorChange"></rx-color-picker>
                </div>
			</div>
			<div class="uploadCommon-color">
				<div class="uploadCommon-color-common">
					<div>{{i18n('componentStyle.rounded','圆角')}}</div>
					<a-input-number style="margin-top: 5px;width: 100%;" v-model:value="params.borderRadius" :min="0" @change="refresh" />
				</div>
				<div class="uploadCommon-color-common">
					<div>{{i18n('componentStyle.borderWidth','边框宽度')}}</div>
					<a-input-number style="margin-top: 5px;width: 100%;" v-model:value="params.borderWidth" :min="0" @change="refresh" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SystemImg from "@/views/modules/design/dialog/system-img.vue";
import RxIconAndColor from "@/views/modules/design/right-component/common/rx-icon-and-color.vue";
import {Util,TokenUtil,RxColorPicker} from "@lowcode/jpaas-base-lib";
import ScreenApi from "@/api/screen-api";

export default {
	name: "UploadCommon",
	props:['globalConfig'],
	data(){
		return{
			params:{},
			fileList:[],
			backgroundColor:'',
		}
	},
	components:{
        RxIconAndColor,
        RxColorPicker
	},
	created() {
		this.init()
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		init(){
			this.params = Object.assign(this.params,this.globalConfig);
			this.backgroundColor = this.params.backgroundColor;
			this.$nextTick(() => {
				if(this.params.background=='color'){
					document.getElementById('color').style.opacity = this.params.opacity/100;
					if(this.params.borderOpacity){
						document.getElementById('borderColor').style.opacity = this.params.borderOpacity/100;
					}
				}
			});
		},
		beforeUpload(file) {
			this.fileList = [file];
			let timestamp = new Date().getTime();
			let formdata = new FormData();
			formdata.append('files', file);
			formdata.append("time", timestamp);
			let self = this;
			ScreenApi.upload(formdata).then(res => {
				if(res.data[0]){
					self.params.customImage = res.data[0].fileId;
					self.refresh()
				}
			})
		},
		getFilePath(fileId){
      let token = TokenUtil.getToken();
			fileId=Util.encryptWord(fileId);
			return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
		},
		systemImg(bgImage) {
			let self = this;
			let conf = {
				curVm: this,
				component: SystemImg,
				title:this.i18n('componentStyle.selectBackground','选择背景'),
				max: true,
                zIndex:999,
				data: {
					bgImage: bgImage,
					mode:self.params.mode,
					imgName:self.params.imgName
				}
			};
			Util.open(conf, function (action,data) {
				if (action != 'ok') return;
				self.params.bgImage = data.key;
				self.params.imgName = data.imgName;
				self.refresh()
			});
		},
		refresh(){
			let self = this;
			self.$forceUpdate();
			self.$emit('uploadCommon',self.params)
		},
		handleChange(){
			this.params.bgImage =1;
			this.refresh()
		},
		borderChange() {
			document.getElementById('borderColor').style.opacity = this.params.borderOpacity/100;
			this.refresh()
		},
		colorChange(){
			this.refresh()
		},
        getImage(url){
            return import.meta.env.JPAAS_BASE_URL+url;
        },

	},
	watch:{
		backgroundColor(){
			this.params.backgroundColor = this.backgroundColor;
			this.refresh()
		},
	}
}
</script>

<style scoped lang="less">
.uploadCommon-color-input{
	border: solid 1px #dedede;border-radius: 3px;height: 32px;margin-top: 5px
}
.themeColors-common-custom-color{
	border: none!important;
	height: 30px;
	padding: 0px;
	margin: 0px;
}
.uploadCommon-color{
	display: flex;
	margin-top: 10px;
}
.uploadCommon-color-common{
	flex: 1;
}
.uploadCommon-color-common:nth-child(1){
	margin-right: 20px;
}
.uploadCommon-img{
	width: 370px;
	margin: auto;
	height: 120px;
	object-fit: cover;
}
.pageStyle-img-system-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 25px;
	cursor: pointer;

.pageStyle-img-system-empty-img {
	width: 46px;
	height: 46px;
}

span {
	font-size: 14px;
	color: #333333;

}
}
.pageStyle-img-system-empty-bgImage {
	height: 150px;
	margin: 10px;
    width: calc(100% - 20px)
}
.pageStyle-img-system {
	border-radius: 4px;
	border: dashed 1px #dedede;
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}
</style>
